<template>
  <div class="app-container shop-detail page-shop-detail">
    <!-- 导航栏 -->
    <div class="nav-box">
      <div class="nav">
        <div
          :class="['nav-item', navStatus === 0 ? 'active' : '']"
          @click="switchNav(0)"
        >
          {{ $t('shopProcess.basicInfo') }}
        </div>
        <!-- <div
          :class="['nav-item', navStatus === 1 ? 'active' : '']"
          @click="switchNav(1)"
        >
          {{ $t('shopProcess.businessInfo') }}
        </div> -->
        <div
          :class="['nav-item', navStatus === 2 ? 'active' : '']"
          @click="switchNav(2)"
        >
          {{ $t('shopProcess.signUpInfo') }}
        </div>
        <div
          :class="['nav-item', navStatus === 3 ? 'active' : '']"
          @click="switchNav(3)"
        >
          {{ $t('shopProcess.financeInfo') }}
        </div>
      </div>
    </div>
    <!-- 模块 -->
    <div class="shop-info-box">
      <el-alert
        v-if="shopBasicInfo.shopStatus===6&&shopAuditStatus.remarks&&paySettlementType===1"
        :title="$t('shopProcess.applyFailTips') + shopAuditStatus.remarks"
        type="error"
        show-icon
        style="margin-top: 20px;"
      />
      <el-alert
        v-else-if="paySettlementType===1 && shopBasicInfo.idCardCollectProcessStatus!==4 && (shopBasicInfo.shopStatus===3 || shopBasicInfo.shopStatus===5) && shopBasicInfo.type===1"
        :title="$t('allinpay.allinpayBusinessTip3')"
        type="error"
        show-icon
        style="margin-top: 20px;"
      />
      <!-- 基本信息 -->
      <div
        v-if="navStatus === 0"
        class="basic-info-mod"
      >
        <!-- 商城审核状态 -->
        <div class="audit-status">
          <!-- status 0 未审核 1已通过 -1未通过 2平台下线 3 平台下线待审核 -->
          <!-- shopStatus 商城状态(-1:已删除 0: 停业中 1:营业中 2:平台下线 3:上线待审核 4:商城申请中 5:开设商城待审核) -->
          <div
            v-if="shopAuditStatus"
            class="audit-item"
          >
            <span>{{ $t('shopProcess.auditStatus') }}：</span>
            <span v-if="shopAuditStatus.status === -1">{{ $t('shop.failed') }}</span>
            <span v-if="shopAuditStatus.status === 0">{{ $t('shop.unreviewed') }}</span>
            <span v-if="shopAuditStatus.status === 1">{{ $t('shop.passed') }}</span>
            <span v-if="shopAuditStatus.status === 2">{{ $t('shop.platformOffline') }}</span>
          </div>
          <div class="audit-item">
            <span>{{ $t('shopProcess.accountStatus') }}：</span>
            <span v-if="shopBasicInfo.accountStatus === 0">{{ $t('shopProcess.disable') }}</span>
            <span v-if="shopBasicInfo.accountStatus === 1">{{ $t('shopProcess.enable') }}</span>
            <span v-if="shopBasicInfo.accountStatus === -1">{{ $t('shopProcess.delete') }}</span>
          </div>
          <div class="audit-item">
            <span>{{ $t('shopProcess.shopStatus') }}：</span>
            <span v-if="shopBasicInfo.shopStatus === -1">{{ $t('shopProcess.deleted') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 0">{{ $t('shopProcess.closed') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 1">{{ $t('shopProcess.inOperation') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 2">{{ $t('shop.platformOffline') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 3">{{ $t('shopProcess.onlinePendingReview') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 4">{{ $t('shopProcess.shopApplication') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 5">{{ $t('shopProcess.storeOpenPendingReview') }}</span>
            <span v-if="paySettlementType ===1 && shopBasicInfo.shopStatus === 6">{{ $t('allinpay.openShopFailure') }}</span>
          </div>
        </div>

        <!-- 商城信息 -->
        <el-divider content-position="left">
          {{ $t('pcdecorate.shopMessage.storeMessage') }}
        </el-divider>
        <div class="basic-info-list">
          <div class="left-info">
            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.logo') }}：
              </p>
              <p
                v-if="shopBasicInfo && shopBasicInfo.shopLogo"
                class="txt"
              >
                <el-image
                  class="img-static"
                  preview-teleported
                  :src="checkFileUrl(shopBasicInfo.shopLogo)"
                  :preview-src-list="[checkFileUrl(shopBasicInfo.shopLogo)]"
                />
                <span
                  v-if="!shopBasicInfo.shopLogo"
                  class="weak"
                >{{ $t('order.notYet') }}</span>
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.storeAccount') }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.merchantAccount }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.shopName') }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.shopName }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>商城首字母：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.firstLetter }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                商城供应商：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.shopSupplier }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.intro') }}：
              </p>
              <p
                v-if="shopBasicInfo.intro"
                class="txt"
              >
                {{ shopBasicInfo.intro }}
              </p>
              <p
                v-if="!shopBasicInfo.intro"
                class="txt weak"
              >
                {{ $t('order.notYet') }}
              </p>
            </div>
          </div>
        </div>

        <!-- 商家信息 -->
        <el-divider content-position="left">
          {{ $t('shopProcess.merchantInfo') }}
        </el-divider>
        <div class="basic-info-list">
          <div class="left-info">
            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.merchantLogo') }}：
              </p>
              <p
                v-if="companyInfo && companyInfo.merchantLogo"
                class="txt"
              >
                <el-image
                  class="img-static"
                  preview-teleported
                  :src="checkFileUrl(companyInfo.merchantLogo)"
                  :preview-src-list="[checkFileUrl(companyInfo.merchantLogo)]"
                />
              </p>
              <span
                v-if="!companyInfo.merchantLogo"
                class="txt weak"
              >{{ $t('order.notYet') }}</span>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.merchantName') }}：
              </p>
              <p
                v-if="companyInfo"
                class="txt"
              >
                {{ companyInfo.merchantName }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.merchantShortName') }}：
              </p>
              <p
                v-if="companyInfo && companyInfo.merchantShortName"
                class="txt"
              >
                {{ companyInfo.merchantShortName }}
              </p>
              <span
                v-if="!companyInfo.merchantShortName"
                class="txt weak"
              >{{ $t('order.notYet') }}</span>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.mainProduct') }}：
              </p>
              <p
                v-if="companyInfo && companyInfo.mainProduct"
                class="txt"
              >
                {{ companyInfo.mainProduct }}
              </p>
              <span
                v-if="!companyInfo.mainProduct"
                class="txt weak"
              >{{ $t('order.notYet') }}</span>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.tel') }}：
              </p>
              <p
                class="txt"
              >
                {{ shopBasicInfo.tel }}
              </p>
            </div>

            <!-- 商家电话 -->
            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.merchantPhone') }}：
              </p>
              <p
                v-if="companyInfo && companyInfo.merchantPhone"
                class="txt"
              >
                {{ companyInfo.merchantPhone }}
              </p>
              <span
                v-if="!companyInfo.merchantPhone"
                class="txt weak"
              >{{ $t('order.notYet') }}</span>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                {{ $t('sys.email') }}：
              </p>
              <p
                v-if="companyInfo && companyInfo.merchantMail"
                class="txt"
              >
                {{ companyInfo.merchantMail }}
              </p>
              <span
                v-if="!companyInfo.merchantMail"
                class="txt weak"
              >{{ $t('order.notYet') }}</span>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.officeWeb') }}：
              </p>
              <p
                v-if="companyInfo && companyInfo.merchantWebsite"
                class="txt"
              >
                {{ companyInfo.merchantWebsite }}
              </p>
              <span
                v-if="!companyInfo.merchantWebsite"
                class="txt weak"
              >{{ $t('order.notYet') }}</span>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.companyAdv') }}：
              </p>
              <p
                v-if="companyInfo.merchantSlogan"
                class="txt"
              >
                {{ companyInfo.merchantSlogan }}
              </p>
              <p
                v-if="!companyInfo.merchantSlogan"
                class="txt weak"
              >
                {{ $t('order.notYet') }}
              </p>
            </div>
          </div>
          <div class="right-info">
            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.companyPic') }}：
              </p>
              <p
                v-if="companyInfo && companyInfo.promotionalImg"
                class="txt"
              >
                <el-image
                  class="img-static"
                  preview-teleported
                  :src="checkFileUrl(companyInfo.promotionalImg)"
                  :preview-src-list="[checkFileUrl(companyInfo.promotionalImg)]"
                />
              </p>
              <span
                v-if="!companyInfo.promotionalImg"
                class="txt weak"
              >{{ $t('order.notYet') }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- /基本信息 -->

      <!-- 工商信息 -->
      <div
        v-if="navStatus === 1"
        class="basic-info-mod"
      >
        <div class="basic-info-list">
          <div class="left-info">
            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.creditCode') }}：
              </p>
              <p
                v-if="businessInfo"
                class="txt"
              >
                {{ businessInfo.creditCode }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.firmName') }}：
              </p>
              <p
                v-if="businessInfo"
                class="txt"
              >
                {{ businessInfo.firmName }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.representative') }}：
              </p>
              <p
                v-if="businessInfo.representative"
                class="txt"
              >
                {{ businessInfo.representative }}
              </p>
              <p
                v-if="!businessInfo.representative"
                class="txt weak"
              >
                {{ $t('order.notYet') }}
              </p>
            </div>
            <div
              v-if="paySettlementType===1"
              class="basic-info-item"
            >
              <p class="tit">
                <span class="asterisk">*</span>法人身份证：
              </p>
              <p
                v-if="businessInfo"
                class="txt"
              >
                {{ businessInfo.legalIds }}
              </p>
            </div>
            <div
              v-if="paySettlementType===1"
              class="basic-info-item"
            >
              <p class="tit">
                <span class="asterisk">*</span>法人手机号：
              </p>
              <p
                v-if="businessInfo"
                class="txt"
              >
                {{ businessInfo.legalPhone }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.capital') }}：
              </p>
              <p
                v-if="businessInfo.capital"
                class="txt"
              >
                {{ businessInfo.capital }} {{ $t('shopProcess.tenThousandYuan') }}
              </p>
              <p
                v-if="!businessInfo.capital"
                class="txt weak"
              >
                {{ $t('order.notYet') }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.residence') }}：
              </p>
              <p
                v-if="businessInfo.residence"
                class="txt"
              >
                {{ businessInfo.residence }}
              </p>
              <p
                v-if="!businessInfo.residence"
                class="txt weak"
              >
                {{ $t('order.notYet') }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.fountTime') }}：
              </p>
              <p
                v-if="businessInfo.foundTime"
                class="txt"
              >
                {{ businessInfo.foundTime.split(' ')[0] }}
              </p>
              <p
                v-if="!businessInfo.foundTime"
                class="txt weak"
              >
                {{ $t('order.notYet') }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                {{ $t('shopProcess.businessPeriod') }}：
              </p>
              <p
                v-if="businessInfo.startTime"
                class="txt"
              >
                <span v-if="businessInfo.endTime">
                  {{ businessInfo.startTime.slice(0, 10) + ' - ' + businessInfo.endTime.slice(0, 10) }}
                </span>
                <span v-else>
                  {{ businessInfo.startTime.slice(0, 10) + ' - ' + $t('shopProcess.noFixedTerm') }}
                </span>
              </p>
              <p
                v-else
                class="txt weak"
              >
                {{ $t('order.notYet') }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.businessScope') }}：
              </p>
              <p
                v-if="businessInfo"
                class="txt"
              >
                {{ businessInfo.businessScope }}
              </p>
            </div>
          </div>
          <div class="right-info">
            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.businessLicense') }}：
              </p>
              <el-image
                v-if="businessInfo && businessInfo.businessLicense"
                class="img-static"
                preview-teleported
                :src="checkFileUrl(businessInfo.businessLicense)"
                :preview-src-list="[checkFileUrl(businessInfo.businessLicense)]"
              />
              <p
                v-if="!businessInfo.businessLicense"
                class="txt weak"
              >
                {{ $t('order.notYet') }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.corporateIdentityCard') }}：
              </p>
              <div class="txt bg-img">
                <el-image
                  v-if="businessInfo && businessInfo.identityCardFront"
                  class="img-static"
                  preview-teleported
                  :src="checkFileUrl(businessInfo.identityCardFront)"
                  :preview-src-list="[checkFileUrl(businessInfo.identityCardFront)]"
                />
                <el-image
                  v-if="businessInfo && businessInfo.identityCardLater"
                  class="img-static"
                  preview-teleported
                  :src="checkFileUrl(businessInfo.identityCardLater)"
                  :preview-src-list="[checkFileUrl(businessInfo.identityCardLater)]"
                />
              </div>
              <p
                v-if="!businessInfo.identityCardFront && !businessInfo.identityCardLater"
                class="txt weak"
              >
                {{ $t('order.notYet') }}
              </p>
            </div>
            <!-- 通联开启下，影印件状态未通过且商城审核状态为待审核则显示提示信息 -->
            <div
              v-if="paySettlementType===1 && shopBasicInfo.idCardCollectProcessStatus!==4 && (shopBasicInfo.shopStatus===3|| shopBasicInfo.shopStatus===5) && shopBasicInfo.type===1"
              class="basic-info-item"
            >
              <p class="tit" />
              <span
                class="update-btn"
                @click="dataUpdate"
              >
                <el-icon><RefreshRight /></el-icon><span>{{ businessInfo.updateTime }}数据更新</span>
              </span>
            </div>
          </div>
          <!-- 重新上传影印件弹窗 -->
          <business-info-reupload
            v-if="reuploadVisible"
            ref="businessInfoReuploadRef"
            :shop-id="businessInfo.shopId"
            :company-id="businessInfo.shopCompanyId"
            @refresh-status="queryShopBasicInfo"
          />
        </div>
      </div>
      <!-- /工商信息 -->

      <!-- 签约信息 -->
      <div
        v-if="navStatus === 2"
        class="contract-info table-box"
      >
        <!-- 签约类目 -->
        <div class="contracted-items contract-category">
          <div class="tips">
            <p class="tit">
              <span class="asterisk">*</span>{{ $t('shopProcess.signingCategory') }}
            </p>
            <p class="txt weak">
              {{ $t('shopProcess.preSigned') }}
              <span class="txt-bold">{{ categoryContract.length }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，
              {{ $t('shopProcess.application') }}
              <span class="txt-bold">{{ applyingCategoryNum }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，
              {{ $t('shopProcess.mostAdd') }}
              <span class="txt-bold">200</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}
            </p>
          </div>
          <div class="table-box">
            <!--  height="286" -->
            <el-table
              :data="categoryContract"
              header-cell-class-name="table-header"
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                :label="$t('shopProcess.categoryName')"
              />
              <el-table-column
                prop="parentName"
                :label="$t('shopProcess.parentCategoryName')"
              />
              <el-table-column
                prop="platformRate"
                :label="$t('shopProcess.categoryRate')"
              >
                <template #default="{ row }">
                  <div v-if="row.platformRate || row.platformRate === 0 || row.customizeRate || row.customizeRate === 0">
                    <span v-if="row.customizeRate === null">{{ row.platformRate }} %</span>
                    <span v-else>{{ row.customizeRate }} %</span>
                  </div>
                  <div v-else>
                    --
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="qualifications"
                :label="$t('shopProcess.categoryQualifications')"
              >
                <template #default="scope">
                  <div v-if="scope.row.imgs.length">
                    <el-image
                      v-for="(img,index) in scope.row.imgs"
                      :key="index"
                      class="tab-img"
                      preview-teleported
                      :src="checkFileUrl(img)"
                      :preview-src-list="checkFileUrl(scope.row.imgs)"
                      :initial-index="initialIndex"
                      @click="initialIndex=index"
                    />
                  </div>
                  <span v-if="!scope.row.imgs.length">--</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="categoryStatus"
                :label="$t('shopProcess.categoryStatus')"
              >
                <template #default="scope">
                  <div
                    v-if="scope.row.categoryStatus === 1"
                    class="tag-txt"
                  >
                    {{ $t('publics.normal') }}
                  </div>
                  <div
                    v-if="scope.row.categoryStatus === 0"
                    class="tag-txt red-tag-txt"
                  >
                    {{ $t('publics.LowerShelf') }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 签约品牌 -->
        <div class="contracted-items contract-brands">
          <div class="tips">
            <p class="tit">
              <span class="asterisk" />{{ $t('shopProcess.signingBrand') }}
            </p>
            <p class="txt weak">
              {{ $t('shopProcess.preSigned') }}
              <span class="txt-bold">{{ platformBrandList.length + customizeBrandList.length }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}，
              {{ $t('shopProcess.application') }}
              <span class="txt-bold">{{ applyingBrandNum }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}，
              {{ $t('shopProcess.mostAdd') }}
              <span class="txt-bold">50</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}
            </p>
          </div>
          <div class="table-box main-container">
            <div class="table-con">
              <el-table
                :data="platformBrandList"
                header-cell-class-name="table-header"
                style="width: 100%"
              >
                <el-table-column
                  prop="name"
                  :label="$t('shopProcess.brandName')"
                >
                  <template #default="scope">
                    <span class="table-cell-text">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="firstLetter"
                  :label="$t('shopProcess.firstLetter')"
                />
                <el-table-column
                  prop="imgUrl"
                  :label="$t('shopProcess.brandLogo')"
                >
                  <template #default="scope">
                    <el-image
                      v-if="scope.row.imgUrl"
                      class="tab-img"
                      preview-teleported
                      :src="checkFileUrl(scope.row.imgUrl)"
                      :preview-src-list="[checkFileUrl(scope.row.imgUrl)]"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="imgs"
                  :label="$t('shopProcess.brandQualifications')"
                >
                  <template #default="scope">
                    <div v-if="scope.row.imgs.length">
                      <el-image
                        v-for="(img,index) in scope.row.imgs"
                        :key="index"
                        class="tab-img"
                        preview-teleported
                        :src="checkFileUrl(img)"
                        :preview-src-list="checkFileUrl(scope.row.imgs)"
                        :initial-index="initialIndex"
                        @click="initialIndex=index"
                      />
                    </div>
                    <span v-if="!scope.row.imgs.length">--</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="brandStatus"
                  :label="$t('shopProcess.brandStatus')"
                >
                  <template #default="scope">
                    <div
                      v-if="scope.row.brandStatus === 1"
                      class="tag-txt"
                    >
                      {{ $t('publics.normal') }}
                    </div>
                    <div
                      v-if="scope.row.brandStatus === 0"
                      class="tag-txt red-tag-txt"
                    >
                      {{ $t('publics.LowerShelf') }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 自定义品牌列表 -->
            <div
              v-if="pageType === 'toAudit'"
              class="table-con"
            >
              <!--  height="286" -->
              <el-table
                :data="customizeBrandList"
                style="width: 100%"
              >
                <el-table-column
                  prop="name"
                  :label="$t('shopProcess.merchantSelfIncreasing')"
                >
                  <template #default="scope">
                    <span class="table-cell-text">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="firstLetter"
                />
                <el-table-column
                  prop="imgUrl"
                >
                  <!-- label="品牌logo" -->
                  <template #default="scope">
                    <div v-if="scope.row.imgUrl">
                      <el-image
                        class="tab-img"
                        preview-teleported
                        :src="checkFileUrl(scope.row.imgUrl)"
                        :preview-src-list="[checkFileUrl(scope.row.imgUrl)]"
                      />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="imgs"
                >
                  <!-- label="授权文件" -->
                  <template #default="scope">
                    <div v-if="scope.row.imgs.length">
                      <el-image
                        v-for="(img,index) in scope.row.imgs"
                        :key="index"
                        class="tab-img"
                        :src="checkFileUrl(img)"
                        preview-teleported
                        :preview-src-list="checkFileUrl(scope.row.imgs)"
                        :initial-index="initialIndex"
                        @click="initialIndex=index"
                      />
                    </div>
                    <span v-if="!scope.row.imgs.length">--</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="brandStatus"
                >
                  <template #default="scope">
                    <div v-if="pageType === 'toAudit'">
                      <div class="tag-txt red-tag-txt">
                        {{ $t('shop.underReview') }}
                      </div>
                    </div>
                    <div v-else>
                      <div
                        v-if="scope.row.brandStatus === 1"
                        class="tag-txt"
                      >
                        {{ $t('publics.normal') }}
                      </div>
                      <div
                        v-if="scope.row.brandStatus === 0"
                        class="tag-txt red-tag-txt"
                      >
                        {{ $t('publics.LowerShelf') }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div v-if="pageType !== 'toAudit'">
          <!-- 是否试用 -->
          <div class="contracted-items s-item">
            <div class="tips">
              <div class="tit">
                <span class="asterisk">*</span>是否试用
              </div>
            </div>
            <div class="si-content">
              <div>
                <el-radio
                  v-model="shopBasicInfo.hasTry"
                  :label="1"
                  disabled
                >
                  {{ $t('publics.yes') }}
                </el-radio>
                <el-radio
                  v-model="shopBasicInfo.hasTry"
                  :label="0"
                  disabled
                >
                  {{ $t('publics.no') }}
                </el-radio>
              </div>
            </div>
          </div>
          <!-- 商城版本 -->
          <div class="contracted-items s-item">
            <div class="tips">
              <div class="tit">
                <span class="asterisk">*</span>商城版本
              </div>
            </div>
            <div class="si-content">
              <div>
                <el-radio
                  v-model="shopBasicInfo.mallVersion"
                  :label="1"
                  disabled
                >
                  免费版
                </el-radio>
                <el-radio
                  v-model="shopBasicInfo.mallVersion"
                  :label="2"
                  disabled
                >
                  基础版
                </el-radio>
                <el-radio
                  v-model="shopBasicInfo.mallVersion"
                  :label="3"
                  disabled
                >
                  标准版
                </el-radio>
              </div>
            </div>
          </div>
          <!-- 签约有效期 -->
          <div
            v-if="paySettlementType!==1"
            class="contracted-items s-item"
          >
            <div class="tips">
              <div class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.validityPeriodOfContract') }}
              </div>
              <div class="txt weak">
                {{ $t('shopProcess.validPeriod') }}
              </div>
            </div>
            <div class="si-content">
              <div class="contract-time-box">
                <el-date-picker
                  v-model="shopBasicInfo.contractStartTime"
                  style="width:170px;"
                  type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :placeholder="$t('shopProcess.startTime')"
                  disabled
                />
                <span style="margin: 0 10px">-</span>
                <div class="end-time">
                  <el-date-picker
                    v-model="shopBasicInfo.contractEndTime"
                    style="width:170px;"
                    type="date"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="shopBasicInfo.contractStartTime&& !shopBasicInfo.contractEndTime ? '' : $t('shopProcess.endTime')"
                    disabled
                  />
                  <span
                    v-if="shopBasicInfo.contractStartTime&& !shopBasicInfo.contractEndTime"
                    class="text disable"
                  >
                    {{ $t('shopProcess.noFixedTerm') }}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 商家类型 -->
          <div class="contracted-items s-item">
            <div class="tips">
              <div class="tit">
                <span class="asterisk">*</span>{{ $t('shopProcess.shopType') }}
              </div>
            </div>
            <div class="si-content">
              <div>
                <el-radio
                  v-model="shopBasicInfo.type"
                  :label="0"
                  disabled
                >
                  {{ $t('shopProcess.ordinaryShop') }}
                </el-radio>
                <el-radio
                  v-model="shopBasicInfo.type"
                  :label="1"
                  disabled
                >
                  {{ $t('shopProcess.preferredGoodShop') }}
                </el-radio>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /签约信息 -->

      <!-- 财务信息 -->
      <div
        v-if="navStatus === 3"
        class="financial-info"
      >
        <div class="table-box">
          <div class="tips">
            <p class="tit">
              <span class="asterisk">*</span>{{ $t('shopProcess.settlementAccount') }}
            </p>
            <p
              v-if="paySettlementType!==1"
              class="txt weak"
            >
              {{ $t('shopProcess.added') }}
              <span class="txt-bold">{{ settlementAccounts.length }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.settlementAccount') }},{{ $t('shopProcess.mostAdd') }}
              <span class="txt-bold">5</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.settlementAccount') }}
            </p>
            <p
              v-else
              class="txt weak"
            >
              已添加
              <span class="txt-bold">{{ settlementAccounts.length }}</span>
              个结算账户，最多可添加
              <span class="txt-bold">10</span>
              个结算账户
              <span>
                ，
                <span class="txt-bold">1</span>
                个法人账户
              </span>
            </p>
          </div>
          <el-table
            :data="settlementAccounts"
            header-cell-class-name="table-header"
            style="width: 100%"
          >
            <el-table-column
              prop="bankName"
              :label="$t('shopProcess.bankName')"
            />
            <el-table-column
              :min-width="paySettlementType===1?'130':null"

              prop="recipientName"
              :label="$t('shopProcess.recipientName')"
            >
              <template #default="scope">
                <div class="recipient-name">
                  <span>{{ scope.row.recipientName }}</span>
                  <div
                    v-if="paySettlementType===1&&scope.row.bankCardPro===0"
                    class="tip"
                  >
                    法人账户
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="cardNo"
              :label="$t('shopProcess.account')"
            />
            <el-table-column
              prop="openingBank"
              :label="$t('shopProcess.openingBank')"
            />
            <el-table-column
              prop="isDefault"
              :label="$t('shopProcess.masterAccount')"
              align="center"
            >
              <template #default="scope">
                {{ scope.row.isDefault ? $t('shopProcess.yes') : $t('shopProcess.no') }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- /财务信息 -->
    </div>

    <!-- 脚部 -->
    <div
      v-if="pageType === 'toAudit'"
      class="footer"
    >
      <div class="foot-box">
        <div
          class="default-btn primary-btn"
          @click="openAuditPopup(1)"
        >
          {{ $t('shopProcess.audit') }}
        </div>
        <div
          class="default-btn"
          @click="openAuditPopup(-1)"
        >
          {{ $t('shopProcess.reject') }}
        </div>
      </div>
    </div>

    <!-- 审核弹窗 -->
    <el-dialog
      v-model="auditDialogVisible"
      :close-on-click-modal="false"
      destroy-on-close
      :show-close="false"
      width="40%"
      class="audit-dialog"
    >
      <div class="content">
        <div class="head">
          <span class="tit">{{ $t('shopProcess.merchantReview') }}</span>
          <span class="sub-tit">{{ $t('shopProcess.addSigning') }}</span>
        </div>
        <el-form
          ref="auditformRef"
          label-width="auto"
          :model="auditform"
          :rules="auditformRules"
          @submit.prevent
        >
          <!-- 试用 -->
          <el-form-item
            label="是否试用"
            prop="hasTry"
          >
            <el-radio-group
              v-model="auditform.hasTry"
              @change="onChangeUse"
            >
              <el-radio :label="1">
                {{ $t('publics.yes') }}
              </el-radio>
              <el-radio :label="0">
                {{ $t('publics.no') }}
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="商城版本"
            prop="mallVersion"
          >
            <el-radio-group
              v-model="auditform.mallVersion"
              :disabled="auditform.hasTry==1"
              @change="onChangeVer"
            >
              <el-radio :label="1">
                免费版
              </el-radio>
              <el-radio :label="2">
                基础版
              </el-radio>
              <el-radio :label="3">
                标准版
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            :label="$t('shopProcess.validityPeriodOfContract')"
            prop="contractStartTime"
          >
            <div class="contract-time-box">
              <el-date-picker
                v-model="auditform.contractStartTime"
                style="width:170px;"
                type="date"
                value-format="YYYY-MM-DD HH:mm:ss"
                :placeholder="$t('shopProcess.startTime')"
                :clearable="false"
              />
              <span style="margin: 0 10px">-</span>
              <div class="end-time">
                <el-date-picker
                  ref="endTimeRef"
                  v-model="auditform.contractEndTime"
                  style="width:170px;"
                  type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :default-time="new Date(2000, 2, 1, 23, 59, 59)"
                  :placeholder="endTimeFlag&&auditform.contractStartTime&& !auditform.contractEndTime ? '' : $t('shopProcess.endTime')"
                  clearable
                  @change="endTimeFlag = false"
                  @focus="endTimeFlag = false"
                  @blur="endTimeFlag = true"
                />
                <span
                  v-if="endTimeFlag&&auditform.contractStartTime&& !auditform.contractEndTime"
                  class="text"
                  @click="focusEndTime"
                >
                  {{ $t('shopProcess.noFixedTerm') }}
                </span>
              </div>
            </div>
          </el-form-item>

          <el-form-item
            :label="$t('shopProcess.shopType')"
            prop="shopType"
          >
            <el-radio-group
              v-model="auditform.shopType"
              :disabled="auditform.hasTry==1 || auditform.mallVersion!=3"
            >
              <el-radio :label="0">
                {{ $t('shopProcess.ordinaryShop') }}
              </el-radio>
              <el-radio :label="1">
                {{ $t('shopProcess.preferredGoodShop') }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div
          class="dialog-footer"
        >
          <div
            class="default-btn"
            @click="auditDialogVisible = false"
          >
            {{ $t('remindPop.cancel') }}
          </div>
          <div
            class="default-btn primary-btn"
            @click="reviewStoreApplications(1)"
          >
            {{ $t('shopProcess.submit') }}
          </div>
        </div>
      </template>
    </el-dialog>
    <!-- 驳回弹窗 -->
    <el-dialog
      v-model="reviewDialogVisible"
      :title="$t('shopProcess.rejectRemarks')"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
      class="remarks"
    >
      <el-input
        v-model="remarks"
        type="textarea"
        :rows="2"
        maxlength="200"
        :placeholder="$t('shopProcess.rejectInputTips')"
      />
      <template #footer>
        <div
          class="dialog-footer"
        >
          <div
            class="default-btn"
            @click="reviewDialogVisible = false"
          >
            {{ $t('remindPop.cancel') }}
          </div>
          <div
            class="default-btn primary-btn"
            @click="reviewStoreApplications(-1)"
          >
            {{ $t('shopProcess.submit') }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
const initialIndex = ref(0) // 图片预览索引

// 审核信息
const auditform = reactive({
  contractStartTime: '', // 签约有效起始时间
  contractEndTime: '', // 签约有效结束时间
  shopType: 0,
  hasTry: 0,
  mallVersion: 1
})

const valiStartTime = (rule, value, callback) => {
  if (auditform.contractEndTime && new Date(auditform.contractStartTime).getTime() >= new Date(auditform.contractEndTime).getTime()) {
    callback(new Error($t('shopProcess.signingTimeTips')))
  } else {
    callback()
  }
}
const auditformRules = reactive({
  contractStartTime: [
    { required: true, message: $t('shopProcess.contractValidityNotEmpty'), trigger: 'change' },
    { validator: valiStartTime, trigger: 'change' }
  ]
})

const allinpayStore = useAllinpayStore()
const paySettlementType = computed(() => {
  return allinpayStore.paySettlementType
})

const reuploadVisible = ref(false) // 重新上传弹窗

onMounted(() => {
  // 查询基本信息
  queryShopBasicInfo()
  // 商城审核状态
  queryShopAuditStatus()
})

// 导航切换
const navStatus = ref(0)
const switchNav = (value) => {
  navStatus.value = value
  if (value === 1) {
    // 查询工商信息
    queryShopBusinessInfo()
  } else if (value === 2) {
    // 查询分类签约信息
    queryCategoryContractInfo()
    // 查询品牌签约信息
    queryBrandSigningInfo()

    // 查询分类申请信息
    queryCategoryContractInfo(0)

    // 查询品牌申请信息
    queryBrandSigningInfo(0)
  } else if (value === 3) {
    // 查询财务信息
    queryShopFinancialInfo()
  } else {
    // 查询基本信息
    queryShopBasicInfo()
  }
}

const shopId = route.query.shopId || 0
// 商城审核状态
const shopAuditStatus = ref({})
/**
 * 商城审核状态
 */
const queryShopAuditStatus = () => {
  http({
    url: http.adornUrl(`/shop/shopAuditing/${shopId}`),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    shopAuditStatus.value = data
  })
}

// 商城基本信息
const shopBasicInfo = ref({})
const companyInfo = ref({})
/**
 * 查询基本信息
 */
const queryShopBasicInfo = () => {
  http({
    url: http.adornUrl('/platform/shopDetail/info'),
    method: 'get',
    params: http.adornParams({
      shopId
    })
  }).then(({ data }) => {
    shopBasicInfo.value = data
  })
  http({
    url: http.adornUrl('/platform/shopCompany'),
    method: 'get',
    params: http.adornParams({
      shopId
    })
  }).then(({ data }) => {
    companyInfo.value = data || {}
  })
}

// 页面类型 查看详情/审核申请
const pageType = ref(route.query.pageType || '')
// 商城工商信息
const businessInfo = ref({})
/**
 * 查询工商信息
 */
const queryShopBusinessInfo = () => {
  http({
    url: http.adornUrl('/platform/shopCompany'),
    method: 'get',
    params: http.adornParams({
      shopId,
      status: pageType.value === 'toAudit' ? 0 : 1
    })
  }).then(({ data }) => {
    businessInfo.value = data
    shopBasicInfo.value.businessLicense = shopBasicInfo.value.businessLicense ? shopBasicInfo.value.businessLicense : data.businessLicense
    shopBasicInfo.value.identityCardFront = shopBasicInfo.value.identityCardFront ? shopBasicInfo.value.identityCardFront : data.identityCardFront
    shopBasicInfo.value.identityCardLater = shopBasicInfo.value.identityCardLater ? shopBasicInfo.value.identityCardLater : data.identityCardLater
  })
}

// 商城分类签约信息
const categoryContract = ref([])
const applyingCategoryNum = ref(0) // 申请中类目数量
/**
 * 查询分类签约信息
 */
const queryCategoryContractInfo = (status = 1) => {
  http({
    url: http.adornUrl('/prod/category/signingInfoByShopId'),
    method: 'get',
    params: http.adornParams({
      shopId,
      status: pageType.value === 'toAudit' ? null : status // 签约状态：1：已通过 0待审核 -1未通过
    })
  }).then(({ data }) => {
    if (status === 1) {
      categoryContract.value = data
      categoryContract.value.forEach(el => {
        el.imgs = el.qualifications ? el.qualifications.split(',') : []
      })
    } else if (status === 0) {
      applyingCategoryNum.value = data.length
    }
  })
}

// 平台品牌签约信息
const platformBrandList = ref([])
// 自增签约品牌信息
const customizeBrandList = ref([])
const applyingBrandNum = ref(0) // 申请中品牌数量
/**
 * 查询品牌签约信息
 */
const queryBrandSigningInfo = (status = 1) => {
  http({
    url: http.adornUrl('/platform/brand/listSigningByShopId'),
    method: 'get',
    params: http.adornParams({
      shopId,
      status: pageType.value === 'toAudit' ? null : status // 签约状态：1：已通过 0待审核 -1未通过
    })
  }).then(({ data }) => {
    if (status === 1) {
      platformBrandList.value = data.platformBrandList
      platformBrandList.value.forEach(el => {
        el.imgs = el.qualifications ? el.qualifications.split(',') : []
      })
      customizeBrandList.value = data.customizeBrandList
      customizeBrandList.value.forEach(el => {
        el.imgs = el.qualifications ? el.qualifications.split(',') : []
      })
    } else if (status === 0) {
      applyingBrandNum.value = data.platformBrandList.length
    }
  })
}

// 商城财务信息
const settlementAccounts = ref([])
/**
 * 查询财务信息
 */
const queryShopFinancialInfo = () => {
  http({
    url: http.adornUrl('/platform/shopBankCard/listByShopId'),
    method: 'get',
    params: http.adornParams({
      shopId,
      status: pageType.value === 'toAudit' ? null : 1
    })
  }).then(({ data }) => {
    settlementAccounts.value = data
  })
}

// 审核弹窗
const auditDialogVisible = ref(false)
// 驳回备注
const remarks = ref('')
// 驳回弹窗
const reviewDialogVisible = ref(false)
/**
 * 打开审核弹窗
 */
const openAuditPopup = (status) => {
  if (status === 1) {
    // 审核
    auditDialogVisible.value = true
    return
  }
  if (status === -1) {
    // 驳回
    remarks.value = ''
    reviewDialogVisible.value = true
  }
}

const endTimeRef = ref(null)
const endTimeFlag = ref(true)
const focusEndTime = () => {
  endTimeRef.value?.focus()
}

const auditformRef = ref(null)
/**
 * 提交商城申请审核
 */
const reviewStoreApplications = (status) => {
  let param = {}
  param = {
    shopId,
    status // 0 未审核 1已通过 -1未通过 2平台下线 3 平台下线待审核
  }
  // 审核
  if (status === 1) {
    auditformRef.value?.validate(valid => {
      if (!valid) {
        return
      }
      param.shopType = auditform.shopType
      param.contractStartTime = auditform.contractStartTime
      param.contractEndTime = auditform.contractEndTime
      auditApply(status, param)
    })
    return
  }
  // 驳回，备注必填
  if (status === -1) {
    if (!remarks.value.trim() || remarks.value.trim().length > 200) {
      ElMessage({
        message: $t('shopProcess.rejectRemarks'),
        type: 'error',
        duration: 1000
      })
      return
    }
    param.remarks = remarks.value.trim() // 驳回备注
    auditApply(status, param)
  }
}

const auditApply = (status, param) => {
  http({
    url: http.adornUrl('/shop/shopAuditing/audit'),
    method: 'put',
    data: http.adornData(param)
  }).then(() => {
    ElMessage({
      message: status === 1 ? $t('shopProcess.auditPass') : $t('shopProcess.applyFailed'),
      type: 'success',
      duration: 1000
    })
    if (status === 1) {
      auditformRef.value?.resetFields() // 清空表单
      auditformRef.value?.clearValidate() // 表单验证关闭时清除错误验证信息
      auditDialogVisible.value = false
    } else {
      remarks.value = ''
      reviewDialogVisible.value = false
    }
    router.push('/platform/audit-shop/index')
  })
}

const businessInfoReuploadRef = ref()
// 数据更新
const dataUpdate = Debounce(() => {
  http({
    url: http.adornUrl('/platform/shopCompany/updateIdCardStatus'),
    method: 'put',
    params: { shopId: businessInfo.value.shopId }
  }).then(({ data }) => {
    if (data === 4) {
      // 审核成功就刷新页面
      location.reload()
    } else if (data === 0 || data === 2 || data === 3) {
      // 审核失败，弹窗让用户重新上传
      reuploadVisible.value = true
      nextTick(() => {
        businessInfoReuploadRef.value.init(data)
      })
      queryShopBusinessInfo()
    } else if (data === 1) {
      // 待审核则更新工商信息
      queryShopBusinessInfo()
    }
  })
}, 1500)

const onChangeUse = (value) => {
  if (value == 1) {
    auditform.mallVersion = 3
    // auditform.contractStartTime = ''
    auditform.shopType = 0
  }
  // auditformRules.contractStartTime[0].required = (value == 0)
}

const onChangeVer = (value) => {
  if (value != 3) {
    auditform.shopType = 0
  }
}
</script>

<style lang="scss" scoped>
@use "index";
</style>
